<template>
  <div class="common-layout">
    <el-container>
      <Aside></Aside>
      <el-container>
        <Header v-if="route.name != 'home'"></Header>
        <el-main :class="{ active: isActive }">
          <router-view v-slot="{ Component }">
            <!-- <KeepAlive :include="['v3props', 'chat']"> -->
              <component :is="Component" :key="$route.fullPath" />
            <!-- </KeepAlive> -->
          </router-view>
          <!-- <router-view /> -->
        </el-main>
        <el-footer></el-footer>
      </el-container>
    </el-container>
  </div>
</template>
<script setup >
import { ref, onMounted, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
import Header from "@/layouts/components/Header.vue";
import Aside from "@/layouts/components/Aside.vue";
const isActive = ref(true);
const router = useRouter();
const currentRoute = ref(router.currentRoute);
watch(currentRoute, () => {
  if (route.name == 'home') {
    isActive.value = true;
  } else {
    isActive.value = false;
  }
})

</script>

<style scoped lang="scss">
.active {
  padding: 0;
}
.el-footer{
  height: 0px;
}
</style>